<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

onMounted(() => {  // 清除本地存储
  if (localStorage.getItem('code_user')){
    localStorage.removeItem('code_user')
    localStorage.clear()
  }

});

const validatePass2 = (rule, value, callback) => {
  if (value !== data.form.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}

const data = reactive({
  form: {},
  rules: {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    confirmPassword: [
      { required: true, message: '请输入确认密码', trigger: 'blur' },
      { validator: validatePass2, trigger: 'blur' }
    ]
  }
});

const formRef = ref();

const register = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/register',data.form).then(res => {
        if (res.code === '200'){
          ElMessage.success("注册成功")
          router.push('/')
        }else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

</script>

<template>
  <!-- 原有登录页面内容包裹在 v-show 中 -->
  <div class="register">
    <div style="width: 100%;display: flex;flex-direction: column;justify-self: center">
      <span style="margin-left: 15px;font-size: 30px;font-weight: bold">注册</span>
      <span style="margin-left: 15px;margin-top: 10px;font-size: 18px;color: rgba(0, 0, 0, 0.35)">请先注册再登录</span>
    </div>
    <div style="margin-top: 50px;padding: 0 15px">
      <el-form ref="formRef" :model="data.form" :rules="data.rules" >
        <el-form-item prop="phone">
          <el-input size="large" v-model="data.form.username" autocomplete="off"
                    prefix-icon="Phone" placeholder="请输入账号" style="height: 50px"
                    class="loginInput"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="large" v-model="data.form.password"
                    show-password autocomplete="off" prefix-icon="Lock"
                    placeholder="请输入密码" style="height: 50px" class="loginInput" />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
              v-model="data.form.confirmPassword"
              size="large"
              show-password
              autocomplete="off"
              prefix-icon="Lock"
              placeholder="请输入确认密码" style="height: 50px"
              class="loginInput"
          />
        </el-form-item>
      </el-form>
      <div style="margin-top: 30px">
        <el-button size="large" type="primary"
                   style="width: 100%;margin-bottom: 10px;border-radius: 10px;height: 60px;font-size: 20px" @click="register">注 册</el-button>
      </div>
      <div style="margin-top: 10px;display: flex">
        <div style="margin-left: auto">
          返回<a style="color: #0266ff" href="/">登 录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.register{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/img/register-bg.png");
  background-size: cover;
  padding: 10px;
}
</style>